<template>
  <van-nav-bar
    :title="keywords"
    left-text="返回"
    left-arrow
    @click-left="router.back()"
  />
  <!-- 组件 -->
  <!-- 
    <van-cell :value="item.name" is-link v-for="item in data.list" :key="item.id" :style="po">
    <template #title>
    <van-image
    width="100"
    height="100"
    :src="item.pic"
    />
    </template>
    </van-cell>
   -->

   <!-- 手写 -->
   <div style="background-color: #f5f5f5">
    <div
      style="
        display: flex;
        justify-content: space-between;
        padding: 20px;
        /* border-bottom: 10px solid white; */
        background-color: white;
        margin: 20px 10px;
        border-radius: 10px;
      "
      v-for="item in data.list"
      :key="item.id"
    >
      <div>
        <van-image
          :src="item.pic"
          round
          width="100px"
          height="100px"
        ></van-image>
      </div>
      <div
        style="
          display: flex;
          flex-direction: column;
          justify-content: space-between;
        "
      >
        <div>{{ item.name }}</div>
        <div>{{ item.price }}</div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { reactive, onUnmounted } from "vue";
import { useRoute, useRouter } from "vue-router";
// vue-router 定义了它的参数类型  import type 导入类型
//useRouter（跳转）, useRoute（获取路由参数）
import req from "@/utils/req";
import { useBottomStore } from '@/stores/buttom'
const store = useBottomStore()
store.changeBottomStatus()
onUnmounted(() => {
  console.log('底部页面切换了')
  store.changeBottomStatus()
})
const data: any = reactive({
  list: [],
});
const route = useRoute();
const router = useRouter();
//解构赋值，query传参  在页面跳转的时候传递参数 在浏览器地址栏显示参数
const { keywords } :any = route.query;
req.get("http://localhost:3000/goods?q=" + keywords).then((res) => {
  console.log(res);
  data.list = res.data;
});
</script>

<style lang="scss" scoped></style>
